/*
 * @Description: 
 * @Author: 张凌瑞
 * @Date: 2021-02-25 15:52:36
 * @LastEditTime: 2021-02-26 20:19:15
 * @LastEditors: 张凌瑞
 */

import React, { FC, useEffect } from "react";

import { useSelector, useDispatch } from "react-redux";

import { bindActionCreators } from "redux";

import { RouteComponentProps} from "react-router-dom"

import * as carAction from "../../store/actions/car.action";

import { IcarState , List } from "../../interface/car.interface";

import "./car.scss";

// interface KeyInter{
//   [key:string]:any
// }
interface Iprops extends RouteComponentProps{
  data: IcarState[],
  getD: (id: string) => void,
  btnTa:(i:string)=>void,
  // props:any,
  // params:KeyInter,
  match: any
}

interface Istate{
  carReducer: IcarState,
  // cardata:
}

const Car: FC<Iprops> = function (props) {

  const state = useSelector((state: Istate) => state.carReducer);

  const dispatch = useDispatch();

  const { getD ,btnTa} = bindActionCreators(carAction, dispatch);
  
  useEffect(() => {
    let id = props.match.params.id;
    getD(id);
    btnTab(state.tab = '全部')
    btnTa(state.tab);
  }, []);
  const goPirce = (id?: string) => {
    props.history.push({pathname:'/img',state:{SerialID:id}})
  }
  const godijia = (id?:string) => {
    props.history.push(`/quotation/${id}`);
  }

  //点击tab切换
  const btnTab = (i: string) => {
    btnTa(i);
    
    
  }
  
  return <div className='box'>
         
    <div className="car">
      <div className='headeImg'>
        <img src={state.data.CoverPhoto?.replace('{0}',"3")} alt="" onClick={()=>goPirce(state.data.SerialID)} />
        <span className='count'>{ state.data.pic_group_count}张照片</span>
      </div>
      
      <div className="dijia">
        <div className="dL">
          
          <span>{state.data.market_attribute?.dealer_price}</span>
          <span>指导价 {state.data.market_attribute?.official_refer_price}</span>
        </div>
        <div className="dR">
          <button onClick={() => godijia(state.data.SerialID)}>询问低价</button>
        </div>

      </div>
      
      <div className="year">
          <span className={state.tab === '全部' ? 'active' :''} onClick={()=>btnTab(state.tab = '全部')}>全部</span>
        {
          state.years.map((item: string,index:number) => {
            return <span key={index} onClick={()=>btnTab(item)} className={state.tab === item ? 'active' :''}>
                {item}
            </span>
          })  
        }
      </div>

      <div className="list">
          {
            state.list ? state.list.map((item:List) => {
              return <ul key={item.car_id+ +new Date()}>
                  <li><span>{item.exhaust_str}</span>/ <span>{item.max_power_str}</span>/ <span>{item.inhale_type}</span></li>
                  <li><span>{item.market_attribute.year}</span>  <span>{item.car_name}</span></li>
                  <li><span>{item.horse_power}马力</span> <span>{item.gear_num}档</span> <span>{item.trans_type}</span></li>
                  <li><span>指导价{item.market_attribute.official_refer_price}</span> <span>{item.market_attribute.dealer_price_min ?item.market_attribute.dealer_price_min + '起' :'暂无' }</span></li>
                  <li><button onClick={()=>godijia(item.car_id)}>询问底价</button></li>
                  </ul>
              }) :''
            }
        </div>
      
    </div>
    
    <footer>
            <button onClick={()=>godijia(state.data.SerialID)}>询问底价</button>
      </footer>
    </div>
}

export default Car;